import { Table, Input } from 'antd'
import { useState } from 'react'

let index = 0

export const NodeAttr = () => {
  const [data, setData] = useState([
    { key: index++, name: '属性1', fieldName: "name", fieldValue: '' },
    { key: index++, name: '属性2', fieldName: "width", fieldValue: '10' },
    { key: index++, name: '属性3', fieldName: "width", fieldValue: '10' },
  ])

  const updateValue = (data) => {
    let tempData = [...data]
    setData(tempData)
  }

  const setFieldData = (index, field, value) => {
    data[index][field] = value
    updateValue(data)
  }

  const columns = [
    {
      title: '序号',
      dataIndex: 'key',
      render(text, record, index) {
        return index + 1
      },
    },
    {
      title: '别名',
      dataIndex: 'name',
      key: 'name',
      width: '26%',
      render: (text, record, index) => {
        return (
          <Input
            value={text}
            onChange={(e) => setFieldData(index, 'name', e.target.value)}
            autoComplete='off'
          />
        )
      },
    },
    {
      title: '属性名称',
      dataIndex: 'fieldName',
      key: 'fieldName',
      width: '28%',
      render: (text, record, index) => {
        return (
          <Input
            value={text}
            onChange={(e) => setFieldData(index, 'name', e.target.value)}
            autoComplete='off'
          />
        )
      },
    },
    {
      title: '属性值',
      dataIndex: 'fieldValue',
      key: 'fieldValue',
      width: '28%',
      render: (text, record, index) => {
        return (
          <Input
            value={text}
            onChange={(e) => setFieldData(index, 'name', e.target.value)}
            autoComplete='off'
          />
        )
      },
    },
  ]

  const otherTableProps = {
    pagination: false,
    size: 'small',
  }

  return <Table dataSource={data} columns={columns} {...otherTableProps} />
}

export default NodeAttr
